import {
  add_class,
  remove_class,
} from '../../../../global/element/class_operate/Func';
import { css_disnone } from '../../../../global/element/DataDefine/sourceData';
import { getElementViewOffsetPosi } from '../../../../global/element/Func';
import { add_remove_duration_time, transLate_X_length } from '../../sourceData';
import { element_add_anima_dataMana } from './cla_element_add_anima_dataMana';

const element_add_animaTag = 'element_add_anima';

class element_add_anima extends element_add_anima_dataMana {
  get [Symbol.toStringTag]() {
    return element_add_animaTag;
  }

  constructor(element) {
    super(element);
  }

  /**
   * 根据 当前 信息 创建
   * 移除 元素 动画
   */
  calculate_staticCss() {
    remove_class(this.targetEl, css_disnone);
    let curEl_posi = getElementViewOffsetPosi(this.targetEl);
    add_class(this.targetEl, css_disnone);

    // 最大 长度
    let maxWidth = curEl_posi.width;

    // 最大 高度
    let maxHeight = curEl_posi.height;

    this.anima_obj.name = this.add_anima_cla;

    // 修订 持续时间
    this.anima_obj.duration = add_remove_duration_time;

    // 修订 关键帧 集
    this.anima_obj.add_new_keyframeName([
      `${this.anima_obj.name}_font_size`,
      `${this.anima_obj.name}_mar_top_keyframe`,
      `${this.anima_obj.name}_opacity`,
      `${this.anima_obj.name}_transform`,
    ]);

    let ret = `
    .${this.anima_obj.name} {
        ${this.anima_obj.toCssString()}

        box-sizing: border-box;
    
        display: relative;

        overflow: hidden;
    }
    
    @keyframes ${this.anima_obj.keyframeName}{
        0%{
            width: 0px;
            height: 0px;
        }

        100%{
            width: ${maxWidth}px;
            height: ${maxHeight}px;
        }
    }
    
    @keyframes ${this.anima_obj.name}_font_size {   
        0%{
            font-size: 0px;
        }
            
        60%{
            font-size: 0px;
        }    
    }
    
    @keyframes ${this.anima_obj.name}_mar_top_keyframe{    
        0%{
            margin: 0;
            padding: 0;
        }
    }
        
    @keyframes ${this.anima_obj.name}_opacity { 
        0%{
            opacity: 0;
        }  

        10%{
            opacity: 0;
        }
    }
    
    
    @keyframes ${this.anima_obj.name}_transform {   
        0%{
            transform: translateX(${transLate_X_length}px);
        }

        40%{
            transform: translateX(${transLate_X_length}px);
        }
    }
    `;

    console.log(ret);

    return ret;
  }
}

export { element_add_anima };
